<template>
	<view class="contribution my-contribution my-contribution-index"
		  style="box-sizing: border-box; width: 750rpx;height: 100vh;
				 padding-top: 1px;background-color: whitesmoke;overflow: auto;">
		<view class="list">
			<view class="item"  v-for="item in templeList" :key="item.advTempleId"
				  style="box-sizing: border-box; width: 700rpx;margin: 10px auto 40px;background-color: white;
					     box-shadow: 0 0 10px 0 #eee;padding: 10px;border-radius: 10px;
						 border-bottom: 5px solid black;">
				<view class="name"
					  style="width: 600rpx;height: 60px;margin: 0 auto;font-size: 40px;
							 text-align: center;line-height: 60px; font-weight: bold;">
					{{item.templeName}}
				</view>
				<view class="image" style="width: 600rpx;height: 300px;margin: 0 auto;">
					<image :src="baseUrl + item.imageUrl"></image>
				</view>
				<view class="address"
					  style="height: 40px;line-height: 40px;font-weight: bold;
							 color: #aaa;">
					地址: {{item.address}}
				</view>
				<view class="type" style="font-weight: bold;
										  color: #aaa;margin-bottom: 10px;">
					<textarea 
						name="type" 
						id="type" 
						cols="60" 
						rows="30"
						style="box-sizing: border-box; width: 100%;height: 240px;
							   background-color: black;
							   color: white;border-radius: 10px;padding: 10px;"
						:value="'捐款协议: ' + item.agreement"
						disabled>
					</textarea>
				</view>
				<view class="code-image" style="width: 200rpx;height: 100px;margin: 0 auto;">
					<image :src="baseUrl + item.qrcodeUrl"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { BASE_IMAGE_URL, BASE_URL, GET_USER_INFO } from '../../../utils/CommonValues.js';
	import request, { GET } from '../../../utils/request.js';
	export default {
		data() {
			return {
				baseUrl: '',
				templeList: [],
				userInfo: {},
			}
		},
		onLoad(option) {
			this.baseUrl = BASE_IMAGE_URL;
			GET_USER_INFO().then(response => {
				this.userInfo = response;
			})
			this.findList();
		},
		methods: {
			findList() {
				request.GET('/system/temple/list', null)
					   .then(response => {
						   console.log("寺庙信息", response.rows)
						   this.templeList = response.rows;
					   })
			}
		}
	}
</script>

<style scoped>
image {
	width: 100%;
	height: 100%;
}
</style>
